<template>
  <page-detail>
    <div style="padding: 10px">
      <bring-card :row="row" v-if="Object.keys(row).length" is-sign />
      <div class="sign-body">
        <div
          class="sign-box"
          @click="signSave"
          :style="{ filter: isSign ? 'grayscale(0.8)' : '' }"
        >
          <span class="s-label">签到</span>
          <span class="s-value">{{ $dayjs().format('HH:mm') }}</span>
        </div>
        <div class="sign-bottom" v-if="address">
          <span class="t-label">当前位置</span>
          <span class="t-value">{{ address }}</span>
        </div>
      </div>
    </div>
  </page-detail>
</template>

<script>
import BringCard from './djzh/components/BringCard.vue'
import { tbMoralEducationList, searchCourse } from '../api/tbMoralEducation'
import { tbSignIn } from '../api/tbSignIn'
import { mapGetters } from 'vuex'
import { MapUtil } from '../utils/map'
import { signInSave, signInStatus } from '../api/flow'

export default {
  name: 'wx_pages_signIn',
  components: { BringCard },
  data() {
    return {
      isSign: false,
      id: '',
      type: '',
      row: {},
      latitude: '',
      longitude: '',
      address: '',
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    async search() {
      this.$showLoading('查询中...')
      let res = null
      if (this.type === 'course') {
        res = await searchCourse({ indexCode: this.id })
        if (res.data) {
          const row = res.data[0]
          this.row = {
            ...row,
            itemCoverUrl: row.coursePublicityUrl,
            itemTitle: row.courseName,
            itemPerson: row.teacherName,
            itemStartTime: `${row.courseStartTime}~${row.courseEndTime}`,
            itemAddr: row.itemAddr,
          }
        }
      } else {
        res = await tbMoralEducationList({ indexCode: this.id })
        if (res.data) {
          this.row = res.data[0]
        }
      }
      this.$hideLoading()
      if (res.data) {
        signInStatus({
          indexCode: this.row.indexCode,
          userId: this.userInfo.userId,
        }).then((res) => {
          this.isSign = res.data
        })
      }
    },
    async signSave() {
      if (this.isSign) {
        return
      }
      const { itemType, itemTitle, indexCode } = this.row
      let formData = {
        userId: this.userInfo.userId,
        approvalType: this.type === 'course' ? '3' : itemType,
        approvalIndexCode: indexCode,
        latitude: this.latitude,
        longitude: this.longitude,
      }
      this.$showLoading('提交中...')
      let res = await signInSave(formData)
      signInStatus({ indexCode, userId: formData.userId }).then((res) => {
        this.isSign = res.data
      })
      if (res.code !== '0') {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        })
      }
      this.$hideLoading()
    },
  },
  onLoad(query) {
    const _this = this
    this.id = query.id
    this.type = query.type
    MapUtil.Geolocation().then((res) => {
      _this.latitude = res.lat
      _this.longitude = res.lng
      _this.address = res.address
    })
    if (this.id) {
      this.search()
    }
  },
}
</script>
<style lang="scss" scoped>
.sign-body {
  background: $uni-color-success;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  .sign-box {
    display: flex;
    flex-direction: column;
    font-weight: bold;
    justify-content: center;
    color: #ffffff;
    background: radial-gradient(circle at center, #66c2ff, #529bcc);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    align-items: center;
    .s-label {
      font-size: 15px;
    }
    .s-value {
      font-size: 18px;
    }
  }
  .sign-bottom {
    justify-content: center;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    .t-label {
      color: #d0d3d2;
    }
    .t-value {
      color: #333333;
    }
  }
}
</style>
